<template>
    <div>
        <!-- 监盘 -->
        <searchForm @clearTime="handleDateTimeChange" v-model:formData="searchFormData"/>
        <div class="table">
            <template v-if="currentHour < 11">
                <el-empty description="交易未开始" />
            </template>
            <template v-else-if="currentHour > 14">
                <el-empty description="交易已结束" />
            </template>
            <template v-else>
                <el-row v-for="(row, rowIndex) in Math.ceil(tableData.length / 8)" :key="rowIndex" :gutter="13">
                    <el-col v-for="(item, index) in tableData.slice(rowIndex * 8, (rowIndex + 1) * 8)" :key="index"
                        :span="3">
                        <tableCard :tableData="item" :highLightRow="currentLine" @mouseHover="changeCurrentLine"
                            @click="clickTable(item)" />
                    </el-col>
                </el-row>
            </template>
        </div>
    </div>
</template>

<script lang='js' setup>
import { ref, provide, watch,computed } from 'vue';
import searchForm from './components/searchForm.vue'
import tableCard from './components/tableCard.vue';
import { getTrading, getTradingTimeCode } from '@/api/supervision'
import moment from "moment"


const tableData = ref([])
const oldtableData = ref([])
const currentTime =ref(moment().format("YYYY-MM-DD HH:mm:ss"))
const currentHour = ref()
const searchCurrentHour = ref()
const searchFormData = ref({
    // date_time: '2024-07-02 12:22:00',
    date_time: currentTime.value,
    type: '',
    tag_name: [],
})
// provide('searchFormData', searchFormData)

// 搜索栏段名
const timeCodeData = ref({
    time_code: '',
    already_delisting_num: '',
    buyer_listing_num: '',
    clear_avg_price: '',
    seller_listing_num: ''
})
provide('timeCodeData', timeCodeData)

// 所有表格联动
const currentLine = ref()

let intervalId = setInterval(() => {
    currentTime.value = moment().format("YYYY-MM-DD HH:mm:ss");
}, 1000);
watch(currentTime, (newVal) => {
    searchFormData.value.date_time = newVal;
});
const reset = () => {
    searchCurrentHour.value = moment(currentTime.value, "YYYY-MM-DD HH:mm:ss").hour()
    currentHour.value = moment(searchFormData.value.date_time, "YYYY-MM-DD HH:mm:ss").hour()
}
// 获取数据
const getData = () => {
    reset()
    if (currentHour.value > 10 && currentHour.value < 15) {
        getTrading(searchFormData.value).then(res => {
            tableData.value = res.data
            oldtableData.value = res.data
        })
    }
}

//搜索
const handleSearch = () => {
    reset()
// 如果是今天并且在11点到15点之间，那么轮询请求
    if (searchCurrentHour.value > 10 && searchCurrentHour.value < 15) {
        // setInterval(() => {
            getData()
        // }, 1000);
    }
    else{
        getData()

    }
}
//确定当前鼠标所在行
const changeCurrentLine = (name) => {
    currentLine.value = name
}

//获取timeDta
const getTimeCodeData = () => {
    const time = moment(searchFormData.value.date_time).format("YYYY-MM-DD");
    const timeCodeFormData = {
        time_code: timeCodeData.value.time_code,
        date_time: time,
    };
    getTradingTimeCode(timeCodeFormData).then(res => {
        timeCodeData.value = res.data;
    });
};
//点击表格  获取timecode
const clickTable = (data) => {
    timeCodeData.value.time_code = data.time_code;
    getTimeCodeData();
};

//关闭定时器
const handleDateTimeChange = ()=>{
    clearInterval(intervalId);
}
watch(() => searchFormData.value, (newProps) => {
    handleSearch()
}, { deep: true })


getData()
</script>

<style scoped lang='less'>
.table {
    // width: 1770px;
    min-height: calc(100vh - 122px);
    background: #14161A;
    border-radius: 0px 0px 4px 4px;
    padding: 10px;
    // display: flex;
}
</style>